{% macro loadMore(pageIndex,pageSize,count,isCanReply,api)%}

<button class="btn btn-success btn-load-more">加载更多...</button>

<script>
  const pageIndex = parseInt('{{pageIndex}}'); // 页面加载时获取当前页面
  const pageSize = parseInt('{{pageSize}}');// 页面加载时获取每页显示博客的数量
  const count = parseInt('{{count}}');//博客总量
  let nextPageIndex = pageIndex;

  if (pageSize * pageIndex >= count) {
    $(".btn-load-more").hide();
  }

  // 点击事件，点击获取数据
  $(".btn-load-more").click(function () {
    // /api/profile/loadMore/zhangsan/2
    ajax.get('{{api}}' + nextPageIndex, function (err, res) {
      if (err) {
        alert(err)
      }
      nextPageIndex = res.pageIndex; // res.pageIndex当前页码

      // 渲染dom
      res.blogList.forEach(item => {

        let $image = "";
        if (item.image) {
          $image = `
            <a href="${item.image}" target="_blank">
              <img src="${item.image}" alt="" width="150" class="blog-image">
            </a>`
        }

        const $loadMoreTemplate = `<div class="blog-item">
          <div class="user-info">
            <img src="${item.user.avatar}" alt="" class="user-avatar" width="50" height="50" style=" border-radius: 50%; ">
          </div>
          <div class="blog-info">
            <div class="blog-content">
              <div>
                <a href="###"><span class="username">${item.user.nickName}：</span></a>
                <span class="text">${item.formatContent}</span>
              </div>
              ${$image}
            </div>
            <div class="create-time">
              <span>${item.createdAt}</span>

              {% if isCanReply %}
                <!-- 添加回复功能 -->
                <a href="#" class="reply" data-nick-name="${item.user.nickName}" data-user-name="${item.user.userName}"
                  data-content="${item.content}">
                  <svg class="bi" width="20" height="20" fill="currentColor">
                    <use xlink:href="/images/bootstrap-icons.svg#reply-all-fill" />
                  </svg>
                  回复
                </a>
              {% endif %}

            </div>
          </div>
          <hr>
        </div>
        <hr>`
        $('.item-wrapper').append($loadMoreTemplate)
      })

      // 如果显示的数量=博客总量，隐藏按钮
      if (pageSize * (res.pageIndex) >= count) {
        $(".btn-load-more").hide();
      }
    })
  })
</script>
{% endmacro %}